<template>
  <el-dialog
    v-model="dialogVisible"
    :title="t('settings.title')"
    :width="dialogWidth"
    :close-on-click-modal="false"
    class="responsive-dialog"
  >
    <el-tabs v-model="activeTab" type="card">
      <!-- 主题设置 -->
      <el-tab-pane label="主题" name="theme">
        <div class="settings-section">
          <h4>{{ t('settings.theme.title') }}</h4>
          
          <div class="setting-item">
            <label>{{ t('settings.theme.mode') }}</label>
            <el-radio-group v-model="settings.theme">
              <el-radio value="light">{{ t('settings.theme.light') }}</el-radio>
              <el-radio value="dark">{{ t('settings.theme.dark') }}</el-radio>
              <el-radio value="auto">{{ t('settings.theme.system') }}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-tab-pane>

      <!-- 关于 -->
      <el-tab-pane label="关于" name="about">
        <div class="about-section">
          <div class="app-info">
            <el-icon :size="64" class="app-icon"><Lock /></el-icon>
            <h2>密码管理器</h2>
            <p class="version">版本 1.0.0</p>
            <p class="description">
              一个安全、简洁的桌面密码管理工具，帮助您安全地存储和管理所有账号密码。
            </p>
          </div>

          <el-divider />

          <div class="features">
            <h4>主要功能</h4>
            <ul>
              <li>AES-256 加密保护您的数据</li>
              <li>强密码生成器</li>
              <li>智能分类管理</li>
              <li>安全的剪贴板操作</li>
              <li>自动备份和恢复</li>
              <li>跨平台支持</li>
            </ul>
          </div>

          <el-divider />

          <div class="support">
            <h4>技术支持</h4>
            <p>如果您遇到问题或有建议，请联系：</p>
            <p>邮箱：support@passwordmanager.com</p>
            <p>GitHub：github.com/passwordmanager</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetSettings">恢复默认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSettings">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'
import { useSettingsStore } from '../stores/settings'
import { t } from '../locales'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const settingsStore = useSettingsStore()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('theme')

// 响应式dialog宽度
const dialogWidth = computed(() => {
  if (typeof window !== 'undefined') {
    const windowWidth = window.innerWidth
    if (windowWidth < 768) return '95%'
    if (windowWidth < 1024) return '80%'
    return '60%'
  }
  return '60%'
})

const settings = computed(() => settingsStore.settings)

// 保存设置
const saveSettings = () => {
  settingsStore.saveSettings()
  ElMessage.success('设置已保存')
  dialogVisible.value = false
}

// 重置设置
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要恢复所有设置到默认值吗？',
      '确认重置',
      {
        type: 'warning',
        confirmButtonText: '重置',
        cancelButtonText: '取消'
      }
    )
    
    settingsStore.resetSettings()
    ElMessage.success('设置已重置')
  } catch (error) {
    // 用户取消
  }
}
</script>

<style scoped>
.responsive-dialog {
  max-width: 95vw;
}

.settings-section {
  padding: clamp(10px, 2vw, 20px);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(15px, 3vw, 20px);
  padding: clamp(8px, 1.5vw, 12px);
  background: var(--el-bg-color-page);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}

.setting-item label {
  font-weight: 500;
  color: var(--el-text-color-primary);
  font-size: clamp(13px, 2.5vw, 14px);
  margin-right: 20px;
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: clamp(8px, 2vw, 12px);
  padding: clamp(10px, 2vw, 16px) 0;
}

.about-section {
  padding: clamp(15px, 3vw, 24px);
  text-align: center;
}

.app-info {
  margin-bottom: clamp(20px, 4vw, 32px);
}

.app-icon {
  color: var(--el-color-primary);
  margin-bottom: clamp(10px, 2vw, 16px);
}

.app-info h2 {
  font-size: clamp(20px, 4vw, 24px);
  margin: clamp(8px, 1.5vw, 12px) 0;
  color: var(--el-text-color-primary);
}

.version {
  font-size: clamp(12px, 2.5vw, 14px);
  color: var(--el-text-color-secondary);
  margin: clamp(4px, 1vw, 8px) 0;
}

.description {
  font-size: clamp(13px, 2.5vw, 14px);
  color: var(--el-text-color-regular);
  line-height: 1.6;
  margin: clamp(12px, 2vw, 16px) 0;
}

.features {
  text-align: left;
  margin: clamp(20px, 4vw, 32px) 0;
}

.features h4 {
  font-size: clamp(14px, 3vw, 16px);
  color: var(--el-text-color-primary);
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  font-size: clamp(12px, 2.5vw, 13px);
  color: var(--el-text-color-regular);
  padding: clamp(4px, 1vw, 6px) 0;
  position: relative;
  padding-left: clamp(16px, 3vw, 20px);
}

.features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--el-color-success);
  font-weight: bold;
}

.support {
  text-align: left;
  margin: clamp(20px, 4vw, 32px) 0;
}

.support h4 {
  font-size: clamp(14px, 3vw, 16px);
  color: var(--el-text-color-primary);
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.support p {
  font-size: clamp(12px, 2.5vw, 13px);
  color: var(--el-text-color-regular);
  margin: clamp(4px, 1vw, 6px) 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .setting-item label {
    margin-right: 0;
    margin-bottom: 8px;
  }
  
  .dialog-footer {
    flex-direction: column;
    gap: 8px;
  }
  
  .dialog-footer .el-button {
    width: 100%;
  }
}

/* 平板适配 */
@media (min-width: 769px) and (max-width: 1024px) {
  .settings-section {
    padding: 16px;
  }
  
  .setting-item {
    margin-bottom: 16px;
    padding: 10px;
  }
}
</style>